<template>
  <el-row id="breadcrumb-box">
        <el-breadcrumb separator="/" id="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item>
            <el-dropdown trigger="click" id="courseName-box">
              <span class="el-dropdown-link">
                {{course.courseName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="updateCourse({courseId:1,courseName:'高等数学'})">高等数学</el-dropdown-item>
                <el-dropdown-item @click.native="updateCourse({courseId:2,courseName:'大学英语'})">大学英语</el-dropdown-item>
                <el-dropdown-item @click.native="updateCourse({courseId:3,courseName:'数据结构'})">数据结构</el-dropdown-item>
                <el-dropdown-item @click.native="updateCourse({courseId:4,courseName:'传感器技术与应用'})">传感器技术与应用</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.name" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  
  name: "Breadcrumb",
  methods:{
    ...mapMutations('course', [
        'updateCourse',
    ]),
    // refreshProblemList(){
    //   this.router.go(0)
    // },     
  },
  computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
  props:{
    breadcrumb:{
      
    }
  },
  data(){
    return{
      // head:[
      //   {name:"所有题目",path:"problem"},
      //   {name:"题目修改",path:"problemEdit"},
      // ]
    }
  }
};
</script>
<style scoped>
/* 自定义的样式 */
#breadcrumb-box{
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dcdfe6;
  color: #1a2749 !important;
  width: 100%;
}
</style>

<style>
/* 修改element-ui的样式 */
#courseName-box{
  font-weight: 700;
  color: #1a2749!important;
}
#breadcrumb-box .el-breadcrumb{
  line-height: normal;
}

/* #courseName-box .el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #267d90!important;
} */
</style>